import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import home_1 from "../../images/tabbar/home_1.png";
import home_2 from "../../images/tabbar/home_2.png";
import fast from "../../images/tabbar/fast.png";
import my_1 from "../../images/tabbar/my_1.png";
import my_2 from "../../images/tabbar/my_2.png";
import "./Tabbar.less";

const useStyles = makeStyles({
  root: {
    width: "100%",
    position: "fixed",
    bottom: 0,
    left: 0,
  },
});

/* 
  函数式组件中没有this
  hisotry   父级传过来的history属性
  function Tabbar(props){}
*/

function Tabbar(props) {
  let initValue = 0;    // 定义value的初始值
  let showTabbar = "flex"; // 控制tabbar的显示隐藏
  switch (props.history.location.pathname) {
    case "/user":
      initValue = 2;
      showTabbar = "flex";
      break;
    case "/fast":
      initValue = 1;
      showTabbar = "flex";
      break;
    case "/home":
      initValue = 0;
      showTabbar = "flex";
      break;
    default:
      showTabbar = "none";
      break;
  }

  const classes = useStyles();
  const [value, setValue] = React.useState(initValue);

  function navChange(event, newValue) {
    setValue(newValue);
    switch (newValue) {
      case 0:
        props.history.push("/home"); // 跳去/home
        break;
      case 1:
        props.history.push("/fast"); // 跳去/fast
        break;
      default:
        props.history.push("/user"); // 跳去/user
        break;
    }
  }

  // 控制tabbar的显示隐藏(flex | none)
  const tabbarStyle = {display: showTabbar}

  return (
    <BottomNavigation
      value={value}
      onChange={navChange}
      showLabels
      className={classes.root}
      style={tabbarStyle}
    >
      <BottomNavigationAction label="首页" icon={<img src={props.history.location.pathname==='/home' ?home_1 : home_2} alt="" />} />
      <BottomNavigationAction label="快速刷题" icon={<img src={fast} alt="" />} />
      <BottomNavigationAction label="我的" icon={<img src={props.history.location.pathname==='/user' ? my_1 : my_2} alt="" />} />
    </BottomNavigation>
  );
}

export default Tabbar;
